<template>
  <div id="app">
    <div class="app-container">
      <!-- 左侧菜单栏 -->
      <aside class="sidebar" v-if="isAuthenticated" :class="{ 'collapsed': isSidebarCollapsed }">
        <div class="sidebar-header">
          <h2 class="sidebar-title" :class="{ 'collapsed': isSidebarCollapsed }">{{ appTitle }}</h2>
          <el-icon class="sidebar-toggle" @click="toggleSidebar">
            <el-icon v-if="isSidebarCollapsed"><ArrowRight /></el-icon>
            <el-icon v-else><ArrowLeft /></el-icon>
          </el-icon>
        </div>
        <nav class="sidebar-nav">
          <router-link to="/" class="nav-item" active-class="active">
            <el-icon><House /></el-icon>
            <span :class="{ 'hidden': isSidebarCollapsed }">首页</span>
          </router-link>
          <router-link to="/users" class="nav-item" active-class="active" v-if="isAdmin">
            <el-icon><User /></el-icon>
            <span :class="{ 'hidden': isSidebarCollapsed }">用户管理</span>
          </router-link>
        </nav>
      </aside>
      
      <!-- 主内容区域 -->
      <main class="main-content" :class="{ 'no-sidebar': !isAuthenticated, 'sidebar-collapsed': isAuthenticated && isSidebarCollapsed }">
        <!-- 顶部导航栏 -->
        <header class="main-header" v-if="isAuthenticated">
          <div class="header-left">
            <el-icon class="mobile-toggle" @click="toggleSidebar">
              <Menu /></el-icon>
            </div>
            <div class="header-center">
              <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
                    {{ item.label }}
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </div>
            <div class="header-right">
              <el-dropdown @command="handleDropdownCommand" placement="bottom-end">
                <div class="user-avatar" @click.stop>
                  <div class="avatar-circle">
                    <span class="avatar-text">{{ currentUser?.username?.charAt(0).toUpperCase() }}</span>
                  </div>
                  <span class="user-name" v-if="!isMobile">欢迎，{{ currentUser?.username }}</span>
                  <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="profile" class="dropdown-item">
                      <el-icon><User /></el-icon>
                      <span>个人信息</span>
                    </el-dropdown-item>
                    <el-dropdown-item command="logout" divided class="dropdown-item">
                      <el-icon><SwitchButton /></el-icon>
                      <span>退出登录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </header>
        
        <router-view />
      </main>
    </div>
    
    <!-- 个人信息弹窗 -->
    <el-dialog v-model="profileDialogVisible" title="个人信息" width="400px" :before-close="handleClose" custom-class="profile-dialog">
      <div class="profile-info">
        <div class="profile-header">
          <div class="profile-avatar-large">
            <span class="avatar-text-large">{{ currentUser?.username?.charAt(0).toUpperCase() }}</span>
          </div>
          <div class="profile-name-section">
            <h3 class="profile-username">{{ currentUser?.username }}</h3>
            <div class="profile-role">
              <el-tag type="primary" size="small">{{ currentUser?.roles?.join(', ') }}</el-tag>
            </div>
          </div>
        </div>
        <div class="profile-details">
          <div class="detail-item">
            <span class="detail-label">用户名：</span>
            <span class="detail-value">{{ currentUser?.username }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">邮箱：</span>
            <span class="detail-value">{{ currentUser?.email }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">角色：</span>
            <span class="detail-value">{{ currentUser?.roles?.join(', ') }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button class="close-button" @click="handleClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { House, User, SwitchButton, ArrowDown, ArrowLeft, ArrowRight, Menu } from '@element-plus/icons-vue'
import { ElMessage, ElDropdown, ElDropdownMenu, ElDropdownItem, ElDialog, ElBreadcrumb, ElBreadcrumbItem, ElTag } from 'element-plus'

const router = useRouter()
const isAuthenticated = ref(false)
const isAdmin = ref(false)
const profileDialogVisible = ref(false)
const currentUser = ref<any>(null)
const isSidebarCollapsed = ref(false)
const isMobile = ref(window.innerWidth < 768)
const appTitle = '用户管理系统'

// 检查认证状态
const checkAuthStatus = () => {
  const token = localStorage.getItem('token')
  const userInfo = localStorage.getItem('userInfo')
  const user = userInfo ? JSON.parse(userInfo) : null
  
  isAuthenticated.value = !!token
  isAdmin.value = user && user.roles && user.roles.includes('ROLE_ADMIN')
  currentUser.value = user
}

// 切换侧边栏展开/收起
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 计算面包屑项
const breadcrumbItems = computed(() => {
  const currentPath = router.currentRoute.value.path
  const items = []
  
  if (currentPath === '/') {
    items.push({ path: '/', label: '首页' })
  } else if (currentPath === '/users') {
    items.push({ path: '/', label: '首页' })
    items.push({ path: '/users', label: '用户管理' })
  }
  
  return items
})

// 处理窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768
  if (isMobile.value) {
    isSidebarCollapsed.value = true
  }
}

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  isAuthenticated.value = false
  isAdmin.value = false
  currentUser.value = null
  ElMessage.success('退出登录成功')
  router.push('/login')
}

// 处理下拉菜单命令
const handleDropdownCommand = (command: string) => {
  if (command === 'profile') {
    profileDialogVisible.value = true
  } else if (command === 'logout') {
    handleLogout()
  }
}

// 关闭个人信息弹窗
const handleClose = () => {
  profileDialogVisible.value = false
}

// 初始化时检查认证状态
onMounted(() => {
  checkAuthStatus()
  window.addEventListener('resize', handleResize)
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 监听路由变化，检查认证状态
watch(() => router.currentRoute.value, () => {
  checkAuthStatus()
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-attachment: fixed;
}

/* 主要颜色变量 */
:root {
  --primary-blue: #3498db;
  --primary-blue-light: #66b1ff;
  --primary-blue-dark: #2980b9;
  --primary-blue-ultralight: #e3f2fd;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --background-light: #f8f9fa;
  --border-radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 - 自由风设计 */
.sidebar {
  width: 260px;
  background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}

/* 侧边栏展开/收起动画 */
.sidebar.collapsed {
  width: 70px;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 30%);
  pointer-events: none;
}

.sidebar-header {
  padding: 25px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.sidebar-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  transition: var(--transition);
}

.sidebar-title.collapsed {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.sidebar-nav {
  flex: 1;
  padding: 20px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: var(--transition);
  border-radius: 8px;
  margin: 0 12px 8px 12px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-item .el-icon {
  margin-right: 12px;
  font-size: 18px;
  transition: var(--transition);
}

.nav-item span.hidden {
  display: none;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.main-content.sidebar-collapsed {
  padding-left: 30px;
}

.main-content.no-sidebar {
  margin-left: 0;
}

/* 顶部导航栏样式 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  margin-bottom: 24px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.header-left .mobile-toggle {
  display: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 20px;
}

.header-center {
  flex: 1;
}

.breadcrumb {
  font-size: 14px;
  color: var(--text-secondary);
}

.header-right {
  display: flex;
  align-items: center;
}

/* 用户头像和下拉菜单 */
.user-avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 24px;
  background: var(--primary-blue-ultralight);
  transition: var(--transition);
}

.user-avatar:hover {
  background: rgba(52, 152, 219, 0.15);
  transform: translateY(-1px);
}

.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.user-name {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.dropdown-arrow {
  margin-left: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  transition: var(--transition);
}

.dropdown-item:hover {
  background: var(--primary-blue-ultralight);
}

.dropdown-item .el-icon {
  margin-right: 10px;
}

/* 个人信息弹窗样式 */
.profile-dialog .el-dialog__header {
  background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 100%);
  color: white;
  padding: 20px 24px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.profile-dialog .el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.profile-info {
  padding: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.profile-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 24px;
  margin-right: 20px;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.profile-name-section {
  flex: 1;
}

.profile-username {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.profile-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--background-light);
  border-radius: 8px;
  transition: var(--transition);
}

.detail-item:hover {
  background: var(--primary-blue-ultralight);
  transform: translateX(2px);
}

.detail-label {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 80px;
}

.detail-value {
  color: var(--text-primary);
  font-weight: 400;
}

.close-button {
  background: var(--primary-blue);
  color: white;
  border: none;
  transition: var(--transition);
}

.close-button:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: 60px;
    flex-direction: row;
    border-radius: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  
  .sidebar-header {
    display: none;
  }
  
  .sidebar-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
  }
  
  .nav-item {
    flex-direction: column;
    padding: 10px 0;
    margin: 0;
    min-width: 60px;
  }
  
  .nav-item .el-icon {
    margin-right: 0;
    margin-bottom: 4px;
  }
  
  .nav-item span {
    font-size: 12px;
  }
  
  .main-content {
    padding: 16px;
    margin-bottom: 60px;
  }
  
  .main-header {
    padding: 12px 16px;
  }
  
  .header-left .mobile-toggle {
    display: block;
  }
  
  .user-name {
    display: none;
  }
  
  .profile-dialog .el-dialog {
    width: 90% !important;
    margin: 5% auto;
  }
}
</style>